import React, { Component, Fragment } from 'react'
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import './App.css'

class App extends Component {
  constructor (props) {
    super(props)

    this.state = {
      list: ['item']
    }

    this.toggleClick = this.toggleClick.bind(this)
  }

  render () {
    return (
      <Fragment>
        <TransitionGroup>
          {
            this.state.list.map((item, index) => (
              <CSSTransition
                key={index}
                in={this.state.show}
                timeout={400}
                appear={true}
                classNames="fade"
                onEntered={el => el.style.color = 'blue'}>
                <div>hello</div>
              </CSSTransition>
            ))
          }
        </TransitionGroup>
        <button onClick={this.toggleClick}>toggle</button>
      </Fragment>
    )
  }

  toggleClick () {
    this.setState((prevState) => ({
      list: [...prevState.list, 'item']
    }))
  }
}

export default App
